<template>
	<view class="container">
		<swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
			<swiper-item v-for="(item,index) in goods.gallery" :key="index">
				<image :src="item" background-size="cover"></image>
			</swiper-item>
		</swiper>
		<!-- 分享 -->
		<view class='goods_name'>
			<view class='goods_name_left jhx_f10'>{{goods.name}}</view>
			<view class="goods_name_right iconfont icon-fenxiang" @tap="shareFriendOrCircle">分享</view>
		</view>
		<view class="share-pop-box" :hidden="!openShare">
			<view class="share-pop">
				<view class="close" @tap="closeShare">
					<image class="icon" src="/static/images/icon_close.png"></image>
				</view>
				<view class='share-info'>
					<button class="sharebtn" open-type="share" v-if="!isGroupon">
						<image class='sharebtn_image' src='/static/images/wechat.png'></image>
						<view class='sharebtn_text'>分享给好友</view>
					</button>
					<button class="savesharebtn" open-type="openSetting" @opensetting="handleSetting" v-if="(!isGroupon) && (!canWrite)">
						<image class='sharebtn_image' src='/static/images/friend.png'></image>
						<view class='sharebtn_text'>保存海报到相册</view>
					</button>
					<button class="savesharebtn" @tap="saveShare" v-if="!isGroupon && canWrite">
						<image class='sharebtn_image' src='/static/images/friend.png'></image>
						<view class='sharebtn_text'>保存海报到相册</view>
					</button>
				</view>
			</view>
		</view>

		<view class="goods-info">
			<view class="c">
				<text class="desc jhx_f11">{{goods.brief}}</text>
				<view class="price">
					<view class="retailPrice jhx_f8">￥{{checkedSpecPrice}}</view>
					<view class="counterPrice jhx_f9">￥{{goods.counterPrice}}</view>
				</view>

				<view class="brand" v-if="brand.name">
					<view hover-class="none" @tap="gotoBrandDetail(brand.id)">
						<text>{{brand.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="section-nav section-attr" @tap="switchAttrPop">
			<view class="t jhx_f4">{{checkedSpecText}}</view>
			<image class="i jhx_f6" src="/static/images/address_right.png" background-size="cover"></image>
		</view>
		<view class="comments" v-if="comment.count > 0">
			<view class="h">
				<view @tap="gotoComment(goods.id)">
					<text class="t jhx_f4">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
					<text class="i jhx_f6">查看全部</text>
				</view>
			</view>
			<view class="b">
				<view class="item" v-for="(item,index) in comment.data" :key="index">
					<view class="info">
						<view class="user">
							<image :src="item.avatar"></image>
							<text>{{item.nickname}}</text>
						</view>
						<view class="time">{{item.addTime}}</view>
					</view>
					<view class="content">
						{{item.content}}
					</view>
					<view class="imgs" v-if="item.picList.length > 0">
						<image class="img" v-for="(iitem,iindex) in item.picList" :key="iindex" :src="iitem "></image>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-attr">
			<view class="t jhx_f4">商品参数</view>
			<view class="l">
				<view class="item" v-for="(item ,index) in attribute" :key="index">
					<text class="left">{{item.attribute}}</text>
					<text class="right">{{item.value}}</text>
				</view>
			</view>
		</view>

		<view class="detail">
			<!-- <import src="/lib/wxParse/wxParse.wxml" /> -->
			<!-- <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" /> -->
			<u-parse :content="goodsDetail" @preview="preview" @navigate="navigate"></u-parse>
		</view>

		<view class="common-problem">
			<view class="h">
				<view class="line"></view>
				<text class="title">常见问题</text>
			</view>
			<view class="b">
				<view class="item" v-for="(item,index) in issueList" :key="index">
					<view class="question-box">
						<text class="spot"></text>
						<text class="question">{{item.question}}</text>
					</view>
					<view class="answer">
						{{item.answer}}
					</view>
				</view>
			</view>
		</view>

		<!-- 大家都在看 -->
		<view class="related-goods" v-if="relatedGoods.length > 0">
			<view class="h">
				<view class="line"></view>
				<text class="title">大家都在看</text>
			</view>
			<view class="b">
				<view class="item" v-for="(item,index) in relatedGoods" :key="index">
					<view @tap="gotoGoods(item.id)">
						<image class="img" :src="item.picUrl" background-size="cover"></image>
						<text class="name jhx_f7">{{item.name}}</text>
						<text class="price jhx_f8">￥{{item.retailPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 规格选择界面 -->
		<view class="attr-pop-box" :hidden="!openAttr">
			<view class="attr-pop">
				<view class="close" @tap="closeAttr">
					<image class="icon" src="/static/images/icon_close.png"></image>
				</view>
				<view class="img-info">
					<image class="img" :src="checkSpecificationUrl || goods.picUrl"></image>
					<view class="info">
						<view class="c">
							<view class="p">价格：￥{{checkedSpecPrice}}</view>
							<view class="a">{{tmpSpecText}}</view>
						</view>
					</view>
				</view>

				<!-- 规格列表 -->
				<view class="spec-con">
					<view class="spec-item" v-for="(item,index) in specificationList" :key="index">
						<view class="name">{{item.name}}</view>
						<view class="values">
							<view class="value " :class="vitem.checked ? 'selected' : ''" @tap="clickSkuValue" v-for="(vitem,vindex) in item.valueList"
							 :key="vindex" :data-value-id="vitem.id" :data-name="vitem.specification">{{vitem.value}}</view>
						</view>
					</view>

					<view class="spec-con" v-if="groupon.length > 0">
						<view class="spec-item">
							<view class="name">团购立减</view>
							<view class="values">
								<view class="value " :class="item.checked ? 'selected' : ''" @tap="clickGroupon" v-for="(item,index) in groupon"
								 :key="index" :data-value-id="item.id">￥{{item.discount}} ({{item.discountMember}}人)</view>
							</view>
						</view>
					</view>

					<!-- 数量 -->
					<view class="number-item">
						<view class="name">数量</view>
						<view class="selnum">
							<view class="cut" @tap="cutNumber">-</view>
							<input :value="number" class="number" disabled="true" type="number" />
							<view class="add" @tap="addNumber">+</view>
						</view>
					</view>


				</view>
			</view>
		</view>

		<!-- 联系客服 -->
		<button class='contact' type="default-dark" session-from="weapp" size="27" :send-message-title="goods.name"
		 :send-message-img="goods.gallery[0]" show-message-card="true" :send-message-path="'/pages/index/index?goodId='+goods.id"
		 open-type='contact' plain>
		</button>

		<!-- 底部按钮 -->
		<view class="bottom-btn">
			<view class="l l-collect" @tap="addCollectOrNot" v-if="!isGroupon">
				<image class="icon" :src="collectImage"></image>
			</view>
			<view class="l l-cart" v-if="!isGroupon">
				<view class="box">
					<text class="cart-count">{{cartGoodsCount}}</text>
					<image @tap="openCartPage" class="icon" src="/static/images/ic_menu_shoping_nor.png"></image>
				</view>
			</view>
			<view class="r" @tap="addToCart" v-if="!soldout && !isGroupon">加入购物车</view>
			<view class="c" @tap="addFast" v-if="!soldout">{{isGroupon?'参加团购':'立即购买'}}</view>
			<view class="n" v-if="soldout">商品已售空</view>
			<share-tip :isAgent='isAgent' v-if="isAgent && goods.brokeragePrice>0.01" :brokeragePrice="goods.brokeragePrice"
			 @onColse="onColse" @sharedFn="shareFriendOrCircle"></share-tip>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uParse from "@/components/feng-parse/parse.vue"
	import shareTip from '@/components/share-tipwin/share-tipwin.vue'
	export default {
		data() {
			return {
				id: 0,
				goods: {},
				groupon: [], //该商品支持的团购规格
				grouponLink: {}, //参与的团购
				attribute: [],
				issueList: [],
				comment: [],
				brand: {},
				specificationList: [],
				productList: [],
				relatedGoods: [],
				cartGoodsCount: 0,
				userHasCollect: 0,
				number: 1,
				checkedSpecText: '规格数量选择',
				tmpSpecText: '请选择规格数量',
				checkedSpecPrice: 0,
				openAttr: false,
				openShare: false,
				noCollectImage: '/static/images/icon_like.png',
				hasCollectImage: '/static/images/icon_like_checked.png',
				collectImage: '/static/images/icon_like.png',
				shareImage: '',
				isAgent: false, //分享提示弹出
				isGroupon: false, //标识是否是一个参团购买
				soldout: false,
				canWrite: false, //用户是否获取了保存相册的权限
				goodsDetail:''
			}
		},
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		components: {
			uParse,
			shareTip
		}, // 页面分享
		onShareAppMessage: function() {
			let that = this;
			let userInfo = that.user;
			let shareUserId = 1;
			if (userInfo) {
				shareUserId = userInfo.userId;
			}
			console.log('分享地址：' + '/pages/index/index?goodId=' + this.id + '&shareUserId=' + shareUserId);
			return {
				title: that.goods.name,
				desc: '好货分享',
				path: '/pages/index/index?goodId=' + this.id + '&shareUserId=' + shareUserId
			}
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			if (options.id) {
				this.id = parseInt(options.id);
				this.getGoodsInfo();
			}

			if (options.grouponId) {
				this.isGroupon = true;
				this.getGrouponInfo(options.grouponId);
			}
			let that = this;
			uni.getSetting({
				success: function(res) {
					console.log(res)
					//不存在相册授权
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success: function() {
								that.canWrite = true;
							},
							fail: function(err) {
								that.canWrite = false
							}
						})
					} else {
						that.canWrite = true;
					}
				}
			})
		},
		onShow: function() {
			// 页面显示
			var that = this;
			that.$util.request(that.$api.api.CartGoodsCount).then(function(res) {
				if (res.errno === 0) {
					that.cartGoodsCount = res.data;
				}
			});
			let userInfo = that.user;
			if (userInfo && userInfo.userLevel == 2) {
				that.isAgent = true;
			}
		},
		onReady: function() {
			// 页面渲染完成
			let that = this;
			let userInfo = that.user;
			if (userInfo && userInfo.userLevel == 2) {
				that.isAgent = true;
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.showNavigationBarLoading() //在标题栏中显示加载
			this.getGoodsInfo();
			uni.hideNavigationBarLoading() //完成停止加载
			uni.stopPullDownRefresh() //停止下拉刷新
		},
		methods: {
			gotoBrandDetail(brandId) {
				uni.navigateTo({
					url: '../brandDetail/brandDetail?id=' + brandId
				})
			},
			gotoComment(goodsId) {
				uni.navigateTo({
					url: '../comment/comment?valueId=' + goodsId + '&type=0'
				})
			},
			gotoGoods(goodsId) {
				uni.navigateTo({
					url: '../goods/goods?id=' + goodsId
				})
			},
			shareFriendOrCircle: function() {
				let that = this;
				that.$util.request(that.$api.api.CreateShareImg, {
					shareObjId: that.id,
					type: 1 //商品类型的海报图
				}, 'POST').then(function(res) {
					if (res.errno === 0) {
						that.shareImage = res.data.shareUrl;
					}
				});

				if (this.openShare === false) {
					this.openShare = !this.openShare;
				} else {
					return false;
				}
			},
			handleSetting: function(e) {
				var that = this;
				// console.log(e)
				if (!e.detail.authSetting['scope.writePhotosAlbum']) {
					uni.showModal({
						title: '警告',
						content: '不授权无法保存',
						showCancel: false
					})
					that.canWrite = false;
				} else {
					uni.showToast({
						title: '保存成功'
					})
					that.canWrite = true;
				}
			},
			// 保存分享图
			saveShare: function() {
				let that = this;
				uni.downloadFile({
					url: that.shareImage,
					success: function(res) {
						console.log(res)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.showModal({
									title: '存图成功',
									content: '图片成功保存到相册了，可以分享到朋友圈了',
									showCancel: false,
									confirmText: '好的',
									confirmColor: '#a78845',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										}
									}
								})
							},
							fail: function(res) {
								console.log('fail')
							}
						})
					},
					fail: function() {
						console.log('fail')
					}
				})
			},

			//从分享的团购进入
			getGrouponInfo: function(grouponId) {
				let that = this;
				that.$util.request(that.$ap.api.GroupOnJoin, {
					grouponId: grouponId
				}).then(function(res) {
					if (res.errno === 0) {
						that.grouponLink = res.data.groupon;
						that.id = res.data.goods.id
						//获取商品详情
						that.getGoodsInfo();
					}
				});
			},

			// 获取商品信息
			getGoodsInfo: function() {
				let that = this;
				that.$util.request(that.$api.api.GoodsDetail, {
					id: that.id
				}).then(function(res) {
					if (res.errno === 0) {

						let _specificationList = res.data.specificationList
						// 如果仅仅存在一种货品，那么商品页面初始化时默认checked
						if (_specificationList.length == 1) {
							if (_specificationList[0].valueList.length == 1) {
								_specificationList[0].valueList[0].checked = true

								// 如果仅仅存在一种货品，那么商品价格应该和货品价格一致
								// 这里检测一下
								let _productPrice = res.data.productList[0].price;
								let _goodsPrice = res.data.info.retailPrice;
								if (_productPrice != _goodsPrice) {
									console.error('商品数量价格和货品不一致');
								}

								that.checkedSpecText = _specificationList[0].valueList[0].value;
								that.tmpSpecText = '已选择：' + _specificationList[0].valueList[0].value;
							}
						}

						that.goods = res.data.info;
						that.attribute = res.data.attribute;
						that.issueList = res.data.issue;
						that.comment = res.data.comment;
						that.brand = res.data.brand;
						that.specificationList = res.data.specificationList;
						that.productList = res.data.productList;
						that.userHasCollect = res.data.userHasCollect;
						that.shareImage = res.data.shareImage == null ? "" : res.data.shareImage;
						that.checkedSpecPrice = res.data.info.retailPrice;
						that.groupon = res.data.groupon;

						//如果是通过分享的团购参加团购，则团购项目应该与分享的一致并且不可更改
						if (that.isGroupon) {
							let groupons = that.groupon;
							for (var i = 0; i < groupons.length; i++) {
								if (groupons[i].id != that.grouponLink.rulesId) {
									groupons.splice(i, 1);
								}
							}
							groupons[0].checked = true;
							//重设团购规格
							that.groupon = groupons

						}

						if (res.data.userHasCollect == 1) {
							that.collectImage = that.hasCollectImage
						} else {
							that.collectImage = that.noCollectImage
						}

						that.goodsDetail = res.data.info.detail;
						
						// WxParse.wxParse('goodsDetail', 'html', res.data.info.detail, that);
						//获取推荐商品
						that.getGoodsRelated();
					}
				});
			},

			// 获取推荐商品
			getGoodsRelated: function() {
				let that = this;
				this.$util.request(this.$api.api.GoodsRelated, {
					id: that.id
				}).then(function(res) {
					if (res.errno === 0) {
						that.relatedGoods = res.data.goodsList;
					}
				});
			},

			// 团购选择
			clickGroupon: function(event) {
				let that = this;

				//参与团购，不可更改选择
				if (that.isGroupon) {
					return;
				}

				let specValueId = event.currentTarget.dataset.valueId;

				let _grouponList = this.groupon;
				for (let i = 0; i < _grouponList.length; i++) {
					if (_grouponList[i].id == specValueId) {
						if (_grouponList[i].checked) {
							_grouponList[i].checked = false;
						} else {
							_grouponList[i].checked = true;
						}
					} else {
						_grouponList[i].checked = false;
					}
				}

				that.groupon = _grouponList;
			},

			// 规格选择
			clickSkuValue: function(event) {
				let that = this;
				let specName = event.currentTarget.dataset.name;
				let specValueId = event.currentTarget.dataset.valueId;

				//判断是否可以点击

				//TODO 性能优化，可在wx:for中添加index，可以直接获取点击的属性名和属性值，不用循环
				let _specificationList = this.specificationList;
				for (let i = 0; i < _specificationList.length; i++) {
					if (_specificationList[i].name === specName) {
						for (let j = 0; j < _specificationList[i].valueList.length; j++) {
							if (_specificationList[i].valueList[j].id == specValueId) {
								//如果已经选中，则反选
								if (_specificationList[i].valueList[j].checked) {
									_specificationList[i].valueList[j].checked = false;
								} else {
									_specificationList[i].valueList[j].checked = true;
									//选择了，则判断当前是否有图片，且图片内容不能为空，不能为默认lazy图片，则替换
									that.setSpecificationUrl(_specificationList[i].valueList[j].picUrl);
								}
							} else {
								_specificationList[i].valueList[j].checked = false;
							}
						}
					}
				}
				this.
				specificationList = _specificationList;
				//重新计算spec改变后的信息
				this.changeSpecInfo();

				//重新计算哪些值不可以点击
			},

			//获取选中的团购信息
			getCheckedGrouponValue: function() {
				let checkedValues = {};
				let _grouponList = this.groupon;
				for (let i = 0; i < _grouponList.length; i++) {
					if (_grouponList[i].checked) {
						checkedValues = _grouponList[i];
					}
				}

				return checkedValues;
			},

			setSpecificationUrl: function(picUrl) {
				if (picUrl && picUrl.length > 1 && picUrl.indexOf("lazyload.png") == -1)
					this.checkSpecificationUrl = picUrl;
			},

			//获取选中的规格信息
			getCheckedSpecValue: function() {
				let checkedValues = [];
				let _specificationList = this.specificationList;
				for (let i = 0; i < _specificationList.length; i++) {
					let _checkedObj = {
						name: _specificationList[i].name,
						valueId: 0,
						valueText: ''
					};
					for (let j = 0; j < _specificationList[i].valueList.length; j++) {
						if (_specificationList[i].valueList[j].checked) {
							_checkedObj.valueId = _specificationList[i].valueList[j].id;
							_checkedObj.valueText = _specificationList[i].valueList[j].value;
						}
					}
					checkedValues.push(_checkedObj);
				}

				return checkedValues;
			},

			//判断规格是否选择完整
			isCheckedAllSpec: function() {
				return !this.getCheckedSpecValue().some(function(v) {
					if (v.valueId == 0) {
						return true;
					}
				});
			},

			getCheckedSpecKey: function() {
				let checkedValue = this.getCheckedSpecValue().map(function(v) {
					return v.valueText;
				});
				return checkedValue;
			},

			// 规格改变时，重新计算价格及显示信息
			changeSpecInfo: function() {
				let checkedNameValue = this.getCheckedSpecValue();

				//设置选择的信息
				let checkedValue = checkedNameValue.filter(function(v) {
					if (v.valueId != 0) {
						return true;
					} else {
						return false;
					}
				}).map(function(v) {
					return v.valueText;
				});
				if (checkedValue.length > 0) {
					this.tmpSpecText = checkedValue.join('　');
				} else {
					this.tmpSpecText = '请选择规格数量';
				}

				if (this.isCheckedAllSpec()) {
					this.checkedSpecText = this.tmpSpecText;

					// 规格所对应的货品选择以后
					let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
					if (!checkedProductArray || checkedProductArray.length <= 0) {
						this.soldout = true;
						console.error('规格所对应货品不存在');
						return;
					}

					let checkedProduct = checkedProductArray[0];
					if (checkedProduct.number > 0) {
						this.checkedSpecPrice = checkedProduct.price;
						this.soldout = false;
					} else {
						this.checkedSpecPrice = this.goods.retailPrice;
						this.soldout = true;
					}

				} else {
					this.					checkedSpecText = '规格数量选择';
					this.checkedSpecPrice = this.goods.retailPrice;
					this.soldout = false;
				}

			},

			// 获取选中的产品（根据规格）
			getCheckedProductItem: function(key) {
				return this.productList.filter(function(v) {
					console.log(key.toString() + "--" + v.specifications.toString());
					if (v.specifications.toString() == key.toString()) {
						return true;
					} else {
						return false;
					}
				});
			}, //添加或是取消收藏
			addCollectOrNot: function() {
				let that = this;
				that.$util.request(that.$api.api.CollectAddOrDelete, {
						type: 0,
						valueId: this.id
					}, "POST")
					.then(function(res) {
						let _res = res;
						if (_res.errno == 0) {
							if (_res.data.type == 'add') {
								that.collectImage = that.hasCollectImage;
							} else {
								that.collectImage = that.noCollectImage;
							}

						} else {
							uni.showToast({
								image: '/static/images/icon_error.png',
								title: _res.errmsg,
								mask: true
							});
						}

					});

			},

			//立即购买（先自动加入购物车）
			addFast: function() {
				var that = this;
				if (this.openAttr == false) {
					//打开规格选择窗口
					this.openAttr = !this.openAttr;
				} else {

					//提示选择完整规格
					if (!this.isCheckedAllSpec()) {
						uni.showToast({
							image: '/static/images/icon_error.png',
							title: '请选择完整规格'
						});
						return false;
					}

					//根据选中的规格，判断是否有对应的sku信息
					let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
					if (!checkedProductArray || checkedProductArray.length <= 0) {
						//找不到对应的product信息，提示没有库存
						uni.showToast({
							image: '/static/images/icon_error.png',
							title: '没有库存'
						});
						return false;
					}

					let checkedProduct = checkedProductArray[0];
					//验证库存
					if (checkedProduct.number <= 0) {
						uni.showToast({
							image: '/static/images/icon_error.png',
							title: '没有库存'
						});
						return false;
					}

					//验证团购是否有效
					let checkedGroupon = this.getCheckedGrouponValue();

					//立即购买
					this.$util.request(this.$api.api.CartFastAdd, {
							goodsId: this.goods.id,
							number: this.number,
							productId: checkedProduct.id
						}, "POST")
						.then(function(res) {
							if (res.errno == 0) {

								// 如果storage中设置了cartId，则是立即购买，否则是购物车购买
								try {
									uni.setStorageSync('cartId', res.data);
									uni.setStorageSync('grouponRulesId', checkedGroupon.id);
									uni.setStorageSync('grouponLinkId', that.grouponLink.id);
									uni.navigateTo({
										url: '/pages/checkout/checkout'
									})
								} catch (e) {}

							} else {
								uni.showToast({
									image: '/static/images/icon_error.png',
									title: res.errmsg,
									mask: true
								});
							}
						});
				}


			},

			//添加到购物车
			addToCart: function() {
				var that = this;
				if (this.openAttr == false) {
					//打开规格选择窗口
					this.openAttr = !this.openAttr;
				} else {

					//提示选择完整规格
					if (!this.isCheckedAllSpec()) {
						uni.showToast({
							image: '/static/images/icon_error.png',
							title: '请选择完整规格'
						});
						return false;
					}

					//根据选中的规格，判断是否有对应的sku信息
					let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
					if (!checkedProductArray || checkedProductArray.length <= 0) {
						//找不到对应的product信息，提示没有库存
						uni.showToast({
							image: '/static/images/icon_error.png',
							title: '没有库存'
						});
						return false;
					}

					let checkedProduct = checkedProductArray[0];
					//验证库存
					if (checkedProduct.number <= 0) {
						uni.showToast({
							image: '/static/images/icon_error.png',
							title: '没有库存'
						});
						return false;
					}

					//添加到购物车
					this.$util.request(this.$api.api.CartAdd, {
							goodsId: this.goods.id,
							number: this.number,
							productId: checkedProduct.id
						}, "POST")
						.then(function(res) {
							let _res = res;
							if (_res.errno == 0) {
								uni.showToast({
									title: '添加成功'
								});
								that.openAttr = !that.openAttr;
								that.cartGoodsCount = _res.data;
								if (that.userHasCollect == 1) {
									that.collectImage = that.hasCollectImage;
								} else {
									that.collectImage = that.noCollectImage;
								}
							} else {
								uni.showToast({
									image: '/static/images/icon_error.png',
									title: _res.errmsg,
									mask: true
								});
							}

						});
				}

			},

			cutNumber: function() {
				this.number = (this.number - 1 > 1) ? this.number - 1 : 1;
			},
			addNumber: function() {
				this.number = this.number + 1;
			},
			switchAttrPop: function() {
				if (this.openAttr == false) {
					this.openAttr = !this.openAttr;
				}
			},
			closeAttr: function() {
				this.openAttr = false;
			},
			closeShare: function() {
				this.openShare = false;
			},
			openCartPage: function() {
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},
			onColse: function() {
				this.isAgent = false;
			}
		}
	}
</script>

<style>
	.container {
		margin-bottom: 100rpx;
	}

	.goodsimgs {
		width: 750rpx;
		height: 750rpx;
	}

	.goodsimgs image {
		width: 750rpx;
		height: 750rpx;
	}

	.commodity_screen {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.2;
		overflow: hidden;
		z-index: 1000;
		color: #fff;
	}

	.commodity_attr_box {
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2000;
		background: #fff;
		padding-top: 20rpx;
	}

	.goods-info {
		width: 750rpx;
		height: 300rpx;
		overflow: hidden;
		background: #fff;
	}

	.goods-info .c {
		display: block;
		width: 718.75rpx;
		height: 100%;
		margin-left: 31.25rpx;
		padding: 18rpx 31.25rpx 38rpx 0;
		border-bottom: 1px solid #f4f4f4;
	}

	.goods-info .c text {
		display: block;
		width: 687.5rpx;
		text-align: left;
	}

	.goods_name {
		/* border: 1px solid black; */
		height: 90rpx;
		line-height: 86rpx;
		border-bottom: 1px solid #fafafa;
	}

	.goods_name_left {
		/* border: 1px solid #757575; */
		float: left;
		height: 90rpx;
		line-height: 86rpx;
		margin-left: 25rpx;
		width: 76%;
		letter-spacing: 1rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods_name_right {
		float: right;
		font-weight: 550;
		margin-top: 28rpx;
		width: 18%;
		height: 90rpx;
		line-height: 85rpx;
		padding: 0;
		margin: 0;
		margin-right: 0rpx;
		text-align: center;
		font-size: 30rpx;
		color: #f4f4f4;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		border-top-right-radius: 0rpx;
		border-bottom-right-radius: 0rpx;
		letter-spacing: 3rpx;
		/* background-image: linear-gradient(to right, #ff7701 100%); */
		background-image: linear-gradient(to right, #f3d10e 0%, #f48f18 100%);
	}

	.goods-info .desc {
		height: 43rpx;
		margin-bottom: 41rpx;
		line-height: 36rpx;
	}

	.goods-info .price {
		height: 70rpx;
		align-content: center;
	}

	.goods-info .counterPrice {
		padding-left: 5%;
		text-decoration: line-through;
	}

	.goods-info .retailPrice {
		float: left;
		padding-left: 0rpx;
	}

	.goods-info .brand {
		margin-top: 23rpx;
		min-height: 40rpx;
		text-align: left;
	}

	.goods-info .brand text {
		display: inline-block;
		width: auto;
		padding: 2px 30rpx 2px 10.5rpx;
		line-height: 35.5rpx;
		border: 1px solid #f48f18;
		font-size: 26rpx;
		color: #f48f18;
		border-radius: 4px;
		background: url('') 95% center no-repeat;
		background-size: 10.75rpx 18.75rpx;
	}

	.section-nav {
		width: 750rpx;
		height: 108rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.section-nav .t {
		float: left;
		width: 600rpx;
		height: 108rpx;
		line-height: 108rpx;
		margin-left: 31.25rpx;
	}

	.section-nav .i {
		float: right;
		width: 52rpx;
		height: 52rpx;
		margin-right: 16rpx;
		margin-top: 28rpx;
	}

	.section-act .t {
		float: left;
		display: flex;
		align-items: center;
		width: 600rpx;
		height: 108rpx;
		overflow: hidden;
		line-height: 108rpx;
		margin-left: 31.25rpx;
	}

	.section-act .label {
		color: #999;
	}

	.section-act .tag {
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		border-radius: 3px;
		height: 37rpx;
		width: auto;
		color: #f48f18;
		overflow: hidden;
		border: 1px solid #f48f18;
		font-size: 25rpx;
		margin: 0 10rpx;
	}

	.section-act .text {
		display: flex;
		align-items: center;
		height: 37rpx;
		width: auto;
		overflow: hidden;
		color: #f48f18;
		font-size: 29rpx;
	}

	.comments {
		width: 100%;
		height: auto;
		padding-left: 30rpx;
		background: #fff;
		margin: 20rpx 0;
	}

	.comments .h {
		height: 102.5rpx;
		line-height: 100.5rpx;
		width: 718.75rpx;
		padding-right: 16rpx;
		border-bottom: 1px solid #dfdfdf;
	}

	.comments .h .t {
		display: block;
		float: left;
		width: 50%;
	}

	.comments .h .i {
		display: block;
		float: right;
		width: 164rpx;
		height: 100.5rpx;
		line-height: 100.5rpx;
		background: url('') right center no-repeat;
		background-size: 52rpx;
	}

	.comments .b {
		height: auto;
		width: 720rpx;
	}

	.comments .item {
		height: auto;
		width: 720rpx;
		overflow: hidden;
	}

	.comments .info {
		height: 117rpx;
		width: 100%;
		padding: 15rpx 0 15rpx 0;
	}

	.comments .user {
		float: left;
		width: 40%;
		height: 87rpx;
		line-height: 87rpx;
		font-size: 0;
	}

	.comments .user image {
		display: block;
		float: left;
		width: 67rpx;
		height: 67rpx;
		margin-right: 27rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.comments .user text {
		display: block;
		width: auto;
		height: 66rpx;
		overflow: hidden;
		font-size: 29rpx;
		line-height: 66rpx;
	}

	.comments .time {
		display: block;
		float: right;
		width: auto;
		height: 67rpx;
		line-height: 67rpx;
		color: #999;
		font-size: 28rpx;
		margin-right: 30rpx;
	}

	.comments .content {
		width: 720rpx;
		padding-right: 30rpx;
		line-height: 45.8rpx;
		font-size: 28rpx;
		margin-bottom: 15rpx;
	}

	.comments .imgs {
		width: 720rpx;
		height: auto;
		margin-bottom: 25rpx;
	}

	.comments .imgs .img {
		height: 150rpx;
		width: 150rpx;
		margin-right: 28rpx;
	}

	.comments .spec {
		width: 720rpx;
		padding-right: 30rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.goods-attr {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding: 0 31.25rpx 25rpx 31.25rpx;
		background: #fff;
	}

	.goods-attr .t {
		width: 687.5rpx;
		height: 104rpx;
		line-height: 104rpx;
	}

	.goods-attr .item {
		width: 687.5rpx;
		height: 65rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 3rpx;
		background: #f7f7f7;
	}

	.goods-attr .left {
		float: left;
		font-size: 28rpx;
		width: 134rpx;
		height: 45rpx;
		line-height: 45rpx;
		overflow: hidden;
		color: #666;
		font-weight: bold;
	}

	.goods-attr .right {
		float: left;
		font-size: 28rpx;
		margin-left: 35rpx;
		width: 465rpx;
		height: 45rpx;
		line-height: 45rpx;
		overflow: hidden;
		color: #666;
	}

	.detail {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.detail image {
		width: 750rpx;
		display: block;
	}

	.common-problem {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.common-problem .h {
		position: relative;
		height: 145.5rpx;
		width: 750rpx;
		padding: 56.25rpx 0;
		background: #fff;
		text-align: center;
	}

	.common-problem .h .line {
		display: inline-block;
		position: absolute;
		top: 72rpx;
		left: 0;
		z-index: 2;
		height: 1px;
		margin-left: 225rpx;
		width: 300rpx;
		background: #ccc;
	}

	.common-problem .h .title {
		display: inline-block;
		position: absolute;
		top: 56.125rpx;
		left: 0;
		z-index: 3;
		height: 33rpx;
		margin-left: 285rpx;
		width: 180rpx;
		background: #fff;
	}

	.common-problem .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding: 0rpx 30rpx;
		background: #fff;
	}

	.common-problem .item {
		height: auto;
		overflow: hidden;
		padding-bottom: 25rpx;
	}

	.common-problem .question-box .spot {
		float: left;
		display: block;
		height: 8rpx;
		width: 8rpx;
		background: #b4282d;
		border-radius: 50%;
		margin-top: 11rpx;
	}

	.common-problem .question-box .question {
		float: left;
		line-height: 30rpx;
		padding-left: 8rpx;
		display: block;
		font-size: 26rpx;
		padding-bottom: 15rpx;
		color: #303030;
	}

	.common-problem .answer {
		line-height: 36rpx;
		padding-left: 16rpx;
		font-size: 26rpx;
		color: #787878;
	}

	.related-goods {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding-bottom: 80rpx;
	}

	.related-goods .h {
		position: relative;
		height: 145.5rpx;
		width: 750rpx;
		padding: 56.25rpx 0;
		background: #fff;
		text-align: center;
		border-bottom: 1px solid #f4f4f4;
	}

	.related-goods .h .line {
		display: inline-block;
		position: absolute;
		top: 72rpx;
		left: 0;
		z-index: 2;
		height: 1px;
		margin-left: 225rpx;
		width: 300rpx;
		background: #ccc;
	}

	.related-goods .h .title {
		display: inline-block;
		position: absolute;
		top: 56.125rpx;
		left: 0;
		z-index: 3;
		height: 33rpx;
		margin-left: 285rpx;
		width: 180rpx;
		background: #fff;
	}

	.related-goods .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.related-goods .b .item {
		float: left;
		background: #fff;
		width: 375rpx;
		height: auto;
		overflow: hidden;
		text-align: center;
		padding: 15rpx 31.25rpx;
		border-right: 1px solid #f4f4f4;
		border-bottom: 1px solid #f4f4f4;
	}

	.related-goods .item .img {
		width: 311.45rpx;
		height: 311.45rpx;
	}

	.related-goods .item .name {
		display: block;
		width: 311.45rpx;
		height: 35rpx;
		margin: 11.5rpx 0 15rpx 0;
		text-align: center;
		overflow: hidden;
		font-size: 30rpx;
		color: #333;
	}

	.related-goods .item .price {
		display: block;
		width: 311.45rpx;
		height: 30rpx;
		text-align: center;
		font-size: 30rpx;
		color: #b4282d;
	}

	.bottom-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background: #fff;
	}

	.bottom-btn .l {
		float: left;
		height: 100rpx;
		width: 162rpx;
		border: 1px solid #f4f4f4;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom-btn .l.l-collect {
		border-right: none;
		border-left: none;
		text-align: center;
		width: 90rpx;
	}

	.bottom-btn .l.l-kefu {
		position: relative;
		height: 54rpx;
		width: 63rpx;
	}

	.bottom-btn .l.l-cart .box {
		position: relative;
		height: 60rpx;
		width: 60rpx;
	}

	.bottom-btn .l.l-cart .cart-count {
		height: 28rpx;
		width: 28rpx;
		z-index: 10;
		position: absolute;
		top: 0;
		right: 0;
		background: #b4282d;
		text-align: center;
		font-size: 18rpx;
		color: #fff;
		line-height: 28rpx;
		border-radius: 50%;
	}

	.bottom-btn .l.l-cart .icon {
		position: absolute;
		top: 10rpx;
		left: 0;
	}

	.bottom-btn .l.l-kefu .kefu-count {
		height: 28rpx;
		width: 28rpx;
		z-index: 10;
		position: absolute;
		top: 0;
		right: 0;
		/* background: #b4282d; */
		text-align: center;
		font-size: 18rpx;
		color: #fff;
		line-height: 28rpx;
		border-radius: 50%;
	}

	.bottom-btn .l.l-kefu .icon {
		position: absolute;
		top: 10rpx;
		left: 0;
	}

	.bottom-btn .l .icon {
		display: block;
		height: 44rpx;
		width: 44rpx;
	}

	.bottom-btn .c {
		float: left;
		background: #b4282d;
		height: 100rpx;
		line-height: 96rpx;
		flex: 1;
		text-align: center;
		color: #fff;
		/* border-top: 2px solid #f4f4f4; */
		/* border-bottom: 2px solid #f4f4f4;  */
	}

	.bottom-btn .r {
		border: 1px solid #f48f18;
		background: #f48f18;
		float: left;
		height: 100rpx;
		line-height: 96rpx;
		flex: 1;
		text-align: center;
		color: #fff;
	}

	.bottom-btn .n {
		border: 1px solid #c0b8ae;
		background: #c0b8ae;
		float: left;
		height: 100rpx;
		line-height: 96rpx;
		flex: 1;
		text-align: center;
		color: #fff;
	}

	@import "../../lib/wxParse/wxParse.wxss";

	.attr-pop-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		z-index: 8;
		bottom: 0;
		/* display: none; */
	}

	.attr-pop {
		width: 100%;
		height: auto;
		max-height: 780rpx;
		padding: 31.25rpx;
		background: #fff;
		position: fixed;
		z-index: 9;
		bottom: 100rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 0rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 0rpx;
	}

	.attr-pop .close {
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		right: 31.25rpx;
		overflow: hidden;
		top: 31.25rpx;
	}

	.attr-pop .close .icon {
		width: 48rpx;
		height: 48rpx;
	}

	.attr-pop .img-info {
		width: 687.5rpx;
		height: 177rpx;
		overflow: hidden;
		margin-bottom: 41.5rpx;
	}

	.attr-pop .img {
		float: left;
		height: 177rpx;
		width: 177rpx;
		background: #f4f4f4;
		margin-right: 31.25rpx;
	}

	.attr-pop .info {
		float: left;
		height: 177rpx;
		display: flex;
		align-items: center;
	}

	.attr-pop .p {
		font-size: 33rpx;
		color: #333;
		height: 33rpx;
		line-height: 33rpx;
		margin-bottom: 10rpx;
	}

	.attr-pop .a {
		font-size: 29rpx;
		color: #333;
		height: 40rpx;
		line-height: 40rpx;
	}

	.spec-con {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.spec-con .name {
		height: 32rpx;
		line-height: 32rpx;
		margin-bottom: 22rpx;
		font-size: 29rpx;
		color: #333;
	}

	.spec-con .values {
		height: auto;
		margin-bottom: 31.25rpx;
		font-size: 0;
	}

	.spec-con .value {
		display: inline-block;
		height: 62rpx;
		padding: 0 15rpx;
		line-height: 56rpx;
		text-align: center;
		margin-right: 25rpx;
		margin-bottom: 16.5rpx;
		border: 1px solid #999;
		border-radius: 6rpx;
		font-size: 25rpx;
		color: #999;
	}

	.spec-con .value.disable {
		border: 1px solid #ccc;
		color: #ccc;
	}

	.spec-con .value.selected {
		border: 1px solid #f0070e;
		color: #fff;
		background: #f0070e;
	}

	.number-item .selnum {
		width: 322rpx;
		height: 71rpx;
		border: 1px solid #ccc;
		display: flex;
	}

	.number-item .cut {
		width: 93.75rpx;
		height: 100%;
		text-align: center;
		line-height: 65rpx;
	}

	.number-item .number {
		flex: 1;
		height: 100%;
		text-align: center;
		line-height: 68.75rpx;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		float: left;
	}

	.number-item .add {
		width: 93.75rpx;
		height: 100%;
		text-align: center;
		line-height: 65rpx;
	}

	.contact {
		height: 80rpx;
		width: 80rpx;
		border-radius: 100%;
		position: fixed;
		bottom: 106rpx;
		right: 10rpx;
		font-size: 20rpx;
		box-sizing: border-box;
		background: url("") no-repeat center 11rpx;
		background-size: 55rpx auto;
	}

	.share-pop-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		z-index: 8;
		bottom: 0;
		/* display: none; */
	}

	.share-pop {
		width: 100%;
		height: auto;
		max-height: 780rpx;
		padding: 31.25rpx;
		background: #fff;
		position: fixed;
		z-index: 9;
		bottom: 100rpx;
	}

	.share-pop .close {
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		right: 31.25rpx;
		top: 31.25rpx;
	}

	.share-pop .close .icon {
		width: 48rpx;
		height: 48rpx;
	}

	.share-pop .share-info {
		width: 100%;
		height: 225rpx;
		overflow: hidden;
		margin-bottom: 41.5rpx;
	}

	.sharebtn {
		top: 75rpx;
		background: none !important;
		font-size: 32rpx;
		color: #fff !important;
		border-radius: 0%;
		width: 175rpx;
		height: 150rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		float: left;
		background: #fff;
		border-bottom: 0px solid #fafafa;
		margin-left: 15%;
	}

	.sharebtn::after {
		border: none;
		border-radius: 0%;
	}

	.savesharebtn {
		top: 75rpx;
		background: none !important;
		font-size: 32rpx;
		color: #fff !important;
		border-radius: 0%;
		width: 175rpx;
		height: 150rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		float: right;
		background: #fff;
		border-bottom: 0px solid #fafafa;
		margin-right: 15%;
	}

	.savesharebtn::after {
		border: none;
		border-radius: 0%;
	}

	.sharebtn_image {
		/* border: 1px solid #757575; */
		width: 128rpx;
		height: 128rpx;
		margin-top: 0rpx;
	}

	.sharebtn_text {
		/* border: 1px solid #757575; */
		width: 150rpx;
		margin-bottom: 2rpx;
		height: 20rpx;
		line-height: 20rpx;
		font-size: 20rpx;
		color: #555;
	}

	.separate {
		background: #e0e3da;
		width: 100%;
		height: 6rpx;
	}
</style>
